
<template>
  <div class="user">
    <!-- 游客 -->
    <div class="tourist" @click="change">
        <dl>
            <dt><img src="@/assets/images/user/youke.jpg"/></dt>
            <dd>
                <p class="username">游客</p>
                <p class="check">已建立虚拟互动飞行形象，点击查看</p>
            </dd>
        </dl>
    </div>
    <!-- 畅行卡 -->
    <div class="travelCard">
      <img src="@/assets/images/user/cxk.jpg"/>
      <div class="card">
        <div v-for="(v,i) in card_list" :key="i"><img :src="v.imgUrl"/><p>{{ v.cardWord }}</p></div>
      </div>
    </div>
    <!-- 我的卡包/订单/票卷 -->
    <div class="mine">
      <div class="item" v-for="(v,i) in mine_list" :key="i">
        <img :src="v.imgUrl"/>
        <p class="mineWord">{{ v.mineWord }}</p>
      </div>
    </div>
    <!-- 我的钱包 -->
    <div class="wallet">
      <div class="walletTitle">
        <h4>我的钱包</h4>
        <p>进入钱包</p>
      </div>
      <div class="walletContent">
        <div class="walletItem" v-for="(v,i) in wallet_list" :key="i">
          <p class="itemTop"><span v-if="v.money">{{ v.money }}</span><span class="yuan" v-if="v.money">元</span><img v-if="v.imgUrl" :src="v.imgUrl"/></p>
          <p class="itemBottom">{{ v.classify }}<van-icon v-if="v.id != 3" name="arrow" /></p>
        </div>
      </div>
    </div>
    <!-- 其他服务 -->
    <div class="otherBox">
      <h4 class="title">其他服务</h4>
      <div class="list" v-for="(v,i) in otherServices_list" :key="i" @click="changeRouter(v)">
        <div class="listLeft">
          <img :src="v.imgUrl"/>
          <p class="classify">{{ v.classify }}</p>
        </div>
        <div class="listRight">
          <p class="remark">{{ v.remark }}</p>
          <p class="glt">></p>
        </div>
      </div>
    </div>
    <Nav/>
  </div>
</template>

<script>
import Nav from "@/components/bottomnav.vue"
export default {
  name: 'user',
  components:{Nav},
  data(){
    return{
      card_list:[
        {id:1,path:'/index',cardWord:'三大购买返现',imgUrl:require('@/assets/images/user/gmfx.jpg')},
        {id:2,path:'/index',cardWord:'四大全年保险',imgUrl:require('@/assets/images/user/baoxian.jpg')},
        {id:3,path:'/index',cardWord:'专属特权服务',imgUrl:require('@/assets/images/user/tequan.jpg')},
      ],
      mine_list:[
        {id:1,path:'/index',mineWord:'我的卡包',imgUrl:require('@/assets/images/user/kabao.jpg')},
        {id:2,path:'/index',mineWord:'我的订单',imgUrl:require('@/assets/images/user/dingdan.jpg')},
        {id:3,path:'/index',mineWord:'我的票券',imgUrl:require('@/assets/images/user/piaojuan.jpg')},
      ],
      wallet_list:[
        {id:1,path:'/index',classify:'我的余额',money:'123'},
        {id:2,path:'/index',classify:'礼金余额',money:'0'},
        {id:3,path:'/index',classify:'付款码',imgUrl:require('@/assets/images/user/fkm.jpg')},
      ],
      otherServices_list:[
        {id:1,path:'/accountInfo',classify:'账户信息',remark:'18209375240',imgUrl:require('@/assets/images/user/zhanghu.jpg')},
        {id:2,path:'/index',classify:'我的证件',remark:'已认证',imgUrl:require('@/assets/images/user/zhengjian.jpg')},
        {id:3,path:'/index',classify:'我的eID身份电子证照',remark:'未开通',imgUrl:require('@/assets/images/user/eid.jpg')},
        {id:4,path:'/index',classify:'航旅口令',remark:'',imgUrl:require('@/assets/images/user/kouling.jpg')},
        {id:5,path:'/set',classify:'设置',remark:'',imgUrl:require('@/assets/images/user/shezhi.jpg')},
      ]
    }
  },
  created(){

  },
  methods:{
    changeRouter(e){
      if(e.path === null){
        this.$message({
            message: '页面还在努力开发中...',
            type: 'warning'
          });
        return false
      }
      this.$router.push({path:e.path})
    },
    change(){
      this.$router.push({path:'/personalInfo'})
    }
  }
} 
</script>

<style scoped>
.user{
    width: 350px;
    margin-left: 13px;
}
/* 游客 */
.tourist dl{
    display: flex;
    text-align: left;
}
.tourist dl img{
  width: 60px;
  height: 60px;
  border-radius: 50px;
  border: 2px solid white;
}
.tourist dd{
  margin-left: 10px;
}
.username{
  font-size: 20px;
  margin: 10px 0 8px 10px;
}
.check{
  font-size: 12px;
  color: #a7adb3;
  margin: 0 0 8px 10px;
}
/* 畅行卡 */
.travelCard{
  width: 350px;
  background-color: #fff;
  border-radius: 5px;
}
.travelCard img{
  width: 350px;
  height: 76px;
  border-radius: 5px;
}
.card{
  display: flex;
  justify-content: space-around;
  padding-bottom: 10px;
  margin-top: 10px;
}
.card div{
  display: flex;
}
.card img{
  width: 16px;
  height: 16px;
  border-radius: 5px;
}
.card p{
  font-size: 11px;
  margin: 0 0 0 5px;
  color: #9f8578;
}
/* 我的卡包 */
.mine{
  width: 350px;
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  margin-top: 10px;
  border-radius: 10px 10px 0 0;
  padding-top: 15px;
}
.mine .item{
  width: 55px;
  height: 50px;
}
.mine img{
  width: 25px;
  height: 25px;
}
.mine p{
  font-size: 12px;
  margin-top: 5px;
}
/* 我的钱包 */
.walletTitle{
  width: 330px;
  display: flex;
  justify-content: space-between;
  background-color: white;
  padding: 10px;
  /* line-height: 40px; */
}
.walletTitle p{
  color: #7eba84;
  font-size: 13px;
  /* margin-top: 25px; */
}
.walletContent{
  width: 350px;
  height: 70px;
  border-radius: 10px;
  background-color: #60b65d;
  display: flex;
  /* justify-content: space-between; */
}
.walletItem{
  width: 65px;
  height: 45px;
  color: white;
  font-size: 12px;
  margin-left: 30px;
  margin-top: 10px;
}
.walletItem:nth-of-type(1){
  margin-left: 30px;
}
.walletItem:nth-of-type(2){
  margin-left: 85px;
  border-right: 1px solid #fff;
  padding-right: 15px;
}
.walletItem:nth-of-type(3){
  margin-left: 25px;
}
.walletLine{
  height: 40px;
  border-right: 1px solid #fff;
  margin: 15px 0 0 20px;
}
.walletItem span{
  font-size: 16px;
}
.walletItem .itemTop{
  margin: 0;
  /* padding-top: 12px; */
}
.walletItem .itemBottom{
  margin: 5px 0;
  font-size: 10px;
}
.itemTop img{
  width: 17px;
  height: 17px;
}
.itemTop .yuan{
  font-size: 12px;
}
/* 其他服务 */
.otherBox{
  margin-top: 10px;
}
.title{
  text-align: left;
  padding: 0 10px;
}
.list{
  width: 330px;
  height: 40px;
  padding: 0 10px;
  line-height: 40px;
  display: flex;
  justify-content: space-between;
}
.list img{
  width: 16px;
  height: 16px;
  padding: 12px 10px 12px 0;
}
.list .classify{
  font-size: 15px;
  margin: 0;
}
.list .remark{
  font-size: 12px;
  margin: 0;
  color: #a2a2a2;
}
.listLeft,.listRight{
  display: flex;
}
.glt{
  color: #a2a2a2;
  margin: 0 0 0 10px;
}
</style>
